<template>
  <div>
    <LocationFilter @filterChanged="handleFilterChange" />
    <el-row :gutter="20">
      <el-col v-for="location in filteredLocations" :key="location.id" :span="12">
        <router-link :to="{ name: 'LocationDetail', params: { locationId: location.id } }" class="location-card-link">
          <el-card class="location-card" :body-style="{ padding: '20px', display: 'flex', alignItems: 'center' }">
            <div class="image-container">
              <img :src="location.photo" class="location-photo" alt="Location Photo" />
            </div>
            <div class="location-details">
              <h3 class="location-name">{{ location.name }}</h3>
              <p>位置: {{ location.address }}</p>
              <p>类型: {{ location.type }}</p>
              <p class="location-number">{{ location.number }} 人预约</p>
            </div>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import LocationFilter from '@/components/Location/LocationFilter.vue';

const props = defineProps({
  locations: {
    type: Array,
    required: true
  }
});

const selectedType = ref('');
const searchTerm = ref('');

const filteredLocations = computed(() => {
  return props.locations.filter(location => {
    const matchesType = selectedType.value ? location.type === selectedType.value : true;
    const matchesSearch = searchTerm.value ? location.name.includes(searchTerm.value) : true;
    return matchesType && matchesSearch;
  });
});

// 更新过滤条件
const handleFilterChange = (filter) => {
  selectedType.value = filter.type;
  searchTerm.value = filter.search;
};
</script>

<style scoped>
.location-card-link {
  text-decoration: none; /* 去掉链接下划线 */
  transition: transform 0.2s; /* 添加转换效果 */
}

.location-card {
  margin-bottom: 20px; /* 卡片之间的间距 */
  display: flex;
  align-items: center; /* 纵向居中对齐内容 */
  height: 240px; /* 固定卡片高度 */
}

.location-card-link:hover .location-card {
  transform: translateY(-5px); /* 鼠标悬停时浮起效果 */
}

.image-container {
  width: 200px; /* 固定图片容器宽度 */
  height: 200px; /* 固定图片容器高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.location-photo {
  width: 100%; /* 图片宽度占满容器 */
  height: 100%; /* 图片高度占满容器 */
  object-fit: cover; /* 保持图片比例并裁剪 */
  border-radius: 5px; /* 照片圆角 */
}

.location-details {
  flex-grow: 1; /* 使细节部分填充剩余空间 */
  padding-left: 20px; /* 左侧间距 */
}

.location-name {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 用省略号表示超出部分 */
}

.location-number {
  margin-top: 10px; /* 上方间距 */
  font-weight: bold; /* 加粗 */
}
</style>
